<template>
	<view class="profile-page">
		<!-- 自定义导航栏 -->
		<custom-navbar
		  :title="'全部预约'"
		  :background-color="'#FFFFFF'"
		></custom-navbar>
		
		<view class="back-btn" @click="navigateBack()">返回</view>
		
		<view v-if="myBookings.length > 0 && !isAdmin" class="booking-list">
		  <view
		    class="booking-item"
		    v-for="(item, index) in myBookings"
		    :key="index"
		  >
		    <view class="booking-left">
		      <view class="booking-title">人体生命科学馆参观预约</view>
		      <view class="booking-info">{{ formatDate(item.bookTime) }}</view>
		    </view>
		    <view class="booking-status" :class="item.status">{{
		      getStatusText(item.status)
		    }}</view>
		  </view>
		</view>
		<view v-if="myBookings.length == 0 && !isAdmin" class="empty-tip">
		  <text class="empty-text">暂无预约记录</text>
		</view>
		
		<view v-if="approveList.length > 0 && isAdmin" class="booking-list">
		  <view
		    class="booking-item"
		    v-for="(item, index) in approveList"
		    :key="index"
		  >
		    <view class="booking-left">
		      <view class="booking-title">人体生命科学馆参观预约</view>
		      <view class="booking-info">预约时间: {{ formatDate(item.bookTime) }}</view>
			  <view class="booking-info">发起账号: {{ item.account }}</view>
			  <view class="booking-info">领队姓名: {{ item.realname }}</view>
			  <view class="booking-info">联系电话: {{ item.phone }}</view>
		    </view>
		    <view class="booking-status" :class="item.status">{{
		      getStatusText(item.status)
		    }}</view>
			<view class="booking-btn" @click="handleApprove(item.userId, true)">同意</view>
			<view class="reject-btn" @click="handleApprove(item.userId, false)">拒绝</view>
		  </view>
		</view>
		<view v-if="myBookings.length == 0 && isAdmin" class="empty-tip">
		  <text class="empty-text">暂无需要审批的预约记录</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import CustomNavbar from "@/components/custom-navbar/index.vue";
import { request } from "@/utils/request";

// 获取参观记录请求接口
const reqGetVenues = (data) => {
	return request({
	  url: "/venues/logs",
	  method: "post",
	  data: JSON.stringify(data)
	})
}

// 获取预约审批列表
const reqGetApproveList = () => {
	return request({
		url: "/mine/perList",
		method: "GET"
	})
}

// 审批
const reqApprove = (data) => {
	return request({
		url: "/mine/agree",
		method: "post",
		data: JSON.stringify(data)
	})
}

const userInfo = ref(uni.getStorageSync('userInfo'));
const isAdmin = ref(uni.getStorageSync('isAdmin'))
// 我的预约列表
const myBookings = ref([]);
// 预约审批列表
const approveList = ref([]);

// 页面跳转
const navigateBack = () => {
  uni.navigateBack();
};

// 格式化为 "YYYY-MM-DD HH:mm:ss"
const formatDate = (dateStr) => {
	const date = new Date(dateStr);
	
	const formattedDate = new Intl.DateTimeFormat("zh-CN", {
	  year: "numeric",
	  month: "2-digit",
	  day: "2-digit",
	  hour: "2-digit",
	  minute: "2-digit",
	  second: "2-digit",
	  hour12: false, // 24小时制
	}).format(date);
	
	return formattedDate
}

// 获取预约状态文本
const getStatusText = (status) => {
  switch (status) {
    case "WAIT":
      return isAdmin.value ? "待审批" : "待参观";
    case "AGREE":
      return "已同意";
    case "REJECT":
      return "已拒绝";
    default:
      return "未知状态";
  }
};

// 审批
const handleApprove = async (userId, status) => {
	const form = { permissionId: userId, isAgree: status };
	
	try {
	  await reqApprove(form)
	} catch (err) {
		return
	}
	
	if (status && approveList.value.length > 0) {
		approveList.value = approveList.value.filter(item => {
		  if (item.userId != userId) {
			  return item
		  }
		})
	}
	uni.$emit('approve', true);
	
}

onMounted(async() => {
	if (userInfo.value && !isAdmin.value) {
		const list = await reqGetVenues({userId: userInfo.value.userId})
		myBookings.value = list
	}
	if (isAdmin.value) {
		const res = await reqGetApproveList()
		approveList.value = res  
	}
})
</script>

<style scoped lang="scss">
.profile-page {
  background-color: $uni-bg-color-grey;
  padding: 0 10rpx 120rpx;
}

.back-btn {
  display: inline-block;
  font-size: $uni-font-size-sm;
  color: $uni-color-primary;
  background-color: $uni-text-color-inverse;
  padding: $spacer-1 $spacer-3;
  border-radius: $uni-border-radius-sm;
  margin-top: 10rpx;
}

.booking-list {
  display: flex;
  flex-direction: column;
}

.booking-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $spacer-3 0;
  border-bottom: 1px solid $uni-border-color;

  &:last-child {
    border-bottom: none;
  }
}

.booking-left {
  flex: 1;
}

.booking-title {
  font-size: $uni-font-size-base;
  margin-bottom: $spacer-1;
}

.booking-info {
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
}

.booking-status {
  font-size: $uni-font-size-sm;
  padding: $spacer-1 $spacer-2;
  border-radius: $uni-border-radius-sm;

  &.WAIT {
    color: $uni-color-warning;
    background-color: rgba($uni-color-warning, 0.1);
  }

  &.AGREE {
    color: $uni-color-success;
    background-color: rgba($uni-color-success, 0.1);
  }

  &.REJECT {
    color: $uni-color-error;
    background-color: rgba($uni-color-error, 0.1);
  }
}

.booking-btn {
  display: inline-block;
  font-size: $uni-font-size-sm;
  color: $uni-color-primary;
  background-color: $uni-text-color-inverse;
  padding: $spacer-1 $spacer-3;
  border-radius: $uni-border-radius-sm;
  margin-left: 5rpx;
}

.reject-btn {
  display: inline-block;
  font-size: $uni-font-size-sm;
  color: $uni-color-error;
  background-color: $uni-text-color-inverse;
  padding: $spacer-1 $spacer-3;
  border-radius: $uni-border-radius-sm;
  margin-left: 5rpx;
}

.empty-tip {
  padding: $spacer-4 0;
  text-align: center;

  .empty-text {
    font-size: $uni-font-size-base;
    color: $uni-text-color-grey;
  }
}
</style>
